<template>
  <div class="home">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>用户信息</span>

      </div>
      <el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">
        <el-form-item label="用户id">
          <el-input v-model="formLabelAlign.uid" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="用户名">
          <el-input v-model="formLabelAlign.username" :disabled="isDisabled"></el-input>
        </el-form-item>
        <el-form-item label="用户密码">
          <el-input v-model="formLabelAlign.password" :disabled="isDisabled" show-password></el-input>
        </el-form-item>
        <el-form-item label="创建时间">
          <el-input v-model="formLabelAlign.userCreated" :disabled="true"></el-input>
        </el-form-item>
      </el-form>
      <el-button type="primary" @click=update()>修改用户信息</el-button>
      <el-button type="primary" @click=save()>保存修改</el-button>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "PhotoManage",
  data() {
    return {
      fits: ["contain"],
        labelPosition: 'right',
        formLabelAlign: {
            uid: '',
            username: '',
            password:"",
            userCreated: ''
        },
        isDisabled:true
    };
  },
  created() {
    this.listAll();
  },
  methods: {
    listAll() {
      this.$axios.post("user/queryUser",
          this.$qs.stringify({
                username: window.sessionStorage.getItem("username")
          })
    ).then((response) => {
        console.log(response.data);
        this.formLabelAlign = response.data.data;
      });
    },
      update(){
          this.isDisabled=false
      },
      save(){
        this.isDisabled=true;
          this.$axios.post(
              "user/update",
              {
                  uId:this.formLabelAlign.uid,
                  username:this.formLabelAlign.username,
                  password:this.formLabelAlign.password
              }
          ).then((response) => {
              console.log(response.data);
              this.$message({
                  //弹出成功提示
                  showClose: true,
                  type: "success",
                  message: response.data.msg,
              });
          });
      }
  },
};
</script>

<style lang="less">
.home {
  .el-card {
    background-color: #ceced2b8;
    .el-card__header {
      font-size: 20px;
      font-weight: 600;
      background-image: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
      color: #234d65;
    }
  }
}
</style>
